/**
 * Created by quxiangqian on 2018/6/5.
 */
export  class DataGrid extends React.Component {
    state={
        cloumn:[
            {name:'a',title:'标题1',width:'120px'},
            {name:'b',title:'标题2',width:'120px'},
            {name:'c',title:'标题3',width:'120px'},
            {name:'d',title:'标题4',width:'120px'},
            {name:'e',title:'标题5',width:'120px'},
            {name:'f',title:'标题6',width:'120px'},
            {name:'g',title:'标题7',width:'120px'},
            {name:'h',title:'标题8',width:'120px'},
            {name:'i',title:'标题9',width:'120px'},
            {name:'j',title:'标题10',width:'120px'},
            {name:'k',title:'标题11',width:'120px'},
        ],
        dataSource:[
            {a:'a1',b:'b1',c:"c1",d:'d1',e:"e1",f:"f1",g:"g1",h:'h1',i:'i1',j:'j1',k:'k1'},
            {a:'a2',b:'b1',c:"c1",d:'d1',e:"e1",f:"f1",g:"g1",h:'h1',i:'i1',j:'j1',k:'k1'},
            {a:'a3',b:'b1',c:"c1",d:'d1',e:"e1",f:"f1",g:"g1",h:'h1',i:'i1',j:'j1',k:'k1'},
            {a:'a4',b:'b1',c:"c1",d:'d1',e:"e1",f:"f1",g:"g1",h:'h1',i:'i1',j:'j1',k:'k1'},
            {a:'a5',b:'b1',c:"c1",d:'d1',e:"e1",f:"f1",g:"g1",h:'h1',i:'i1',j:'j1',k:'k1'},
            {a:'a6',b:'b1',c:"c1",d:'d1',e:"e1",f:"f1",g:"g1",h:'h1',i:'i1',j:'j1',k:'k1'},
            {a:'a7',b:'b1',c:"c1",d:'d1',e:"e1",f:"f1",g:"g1",h:'h1',i:'i1',j:'j1',k:'k1'},
            {a:'a8',b:'b1',c:"c1",d:'d1',e:"e1",f:"f1",g:"g1",h:'h1',i:'i1',j:'j1',k:'k1'},

        ],
        lock:{clo:0,row:0}
    }
    /**
     * 加载数据
     * @param e
     */
    load=(e)=>{
        if(this.props.form){

        }
    }
    /**
     * 锁定行和列
     * @param conf
     */
    lock=(conf)=>{
        console.log(conf);
        this.state.lock={...this.state.lock,...conf};
        this.setState({lock:{...this.state.lock,...conf}});
    }
    /**
     * 渲染左边表格
     */
    renderHeaderLeft(){
        if(this.state.lock.clo!==0){

           let cloumn=this.state.cloumn.filter((item,index)=>index<this.state.lock.clo)
           return (
               <table >
                 <tr>
                     {cloumn.map((f)=><td style={{width:f.width,maxWidth:f.width,minWidth:f.width}}>{f.title}</td>)}
                 </tr>
               </table>
           )
        }
    }

    itemClick=(record)=>{
       // console.log(record);
    }

    renderHeaderCell=(f)=>{
        return f.title;
    }

    renderBodyCell=(f)=>{
        return f.title;
    }
    /**
     * 渲染右边表格
     */
    renderHeaderRight(){
        if(this.state.lock.clo===0){
           return(
               <table >
                <tr>
                    {this.state.cloumn.map((f)=><td  style={{width:f.width,maxWidth:f.width,minWidth:f.width}}>{this.renderHeaderCell(f)}</td>)}
                </tr>
              </table>
           )
        }else{
            let cloumn=this.state.cloumn.filter((item,index)=>index>=this.state.lock.clo)
            return (
                <table>
                    <tr>
                        {cloumn.map((f)=><td style={{width:f.width,maxWidth:f.width,minWidth:f.width}}>{f.title}</td>)}
                    </tr>
                </table>
            )
        }
    }

    renderBodyLeft(){
        if(this.state.lock.clo!==0) {
            let cloumn=this.state.cloumn.filter((item,index)=>index<this.state.lock.clo)
            return (
                <table >
                    {
                        this.state.dataSource.map((row) => (
                            <tr>
                                {this.state.cloumn.map((f) =>{
                                    let rowfiled=row[f.name];
                                    if(rowfiled===undefined){
                                        rowfiled="";
                                    }
                                    return <td onClick={(e)=>{this.itemClick(row)}} style={{width: f.width,maxWidth:f.width,minWidth:f.width}}>{
                                        !f.render?rowfiled+"":f.render(row)
                                    }</td>
                                } )}
                            </tr>
                        ))
                    }
                </table>
            )
        }
    }
    renderBodyRight(){
        if(this.state.lock.clo===0){
            return(
                <table >
                    {
                        this.state.dataSource.map((row)=>(

                            <tr>
                                {this.state.cloumn.map((f) =>{
                                    let rowfiled=row[f.name];
                                    if(rowfiled===undefined){
                                        rowfiled="";
                                    }
                                    return <td onClick={(e)=>{this.itemClick(row)}} style={{width: f.width,maxWidth:f.width,minWidth:f.width}}>{
                                        !f.render?rowfiled+"":f.render(row)
                                    }</td>
                                } )}
                            </tr>
                        ))
                    }
                </table>
            )
        }else{
            let cloumn=this.state.cloumn.filter((item,index)=>index>=this.state.lock.clo)
            return(
                <table >
                    {
                        this.state.dataSource.map((row)=>(
                            <tr>
                                {cloumn.map((f) => <td onClick={(e)=>{this.itemClick(row)}} style={{width: f.width,maxWidth:f.width,minWidth:f.width}}>{!f.render?row[f.name]+"":f.render(row)}</td>)}
                            </tr>
                        ))
                    }
                </table>
            )
        }
    }

    headerRightScroll=(e)=>{
       this.refs.bodyRight.scrollLeft=e.target.scrollLeft;

    }
    bodyRightScroll=(e)=>{
        this.refs.headerRight.scrollLeft=e.target.scrollLeft;
        this.refs.bodyLeft.scrollTop=e.target.scrollTop;
    }

    render(){
        // this.state.cloumn=this.prop.cloumn===null?this.state.cloumn:this.prop.cloumn;
        // this.state.dataSource=this.prop
        if(this.props.cloumn){
            this.state.cloumn=this.props.cloumn
        }
        if(this.props.dataSource){
            this.state.dataSource=this.props.dataSource
        }
        if(this.props.lock){
            this.state.lock={...this.state.lock,...this.props.lock};
        }
        return (
            <div className="datagrid" style={{overFlow:'auto',width:'100%'}}>
                <div className="header">
                    <div className="left">

                                {this.renderHeaderLeft()}

                    </div>
                    <div className="right" ref="headerRight" onScroll={this.headerRightScroll}>

                                {this.renderHeaderRight()}
                    </div>
                </div>
                <div className="body" >
                    <div className="left" ref="bodyLeft">
                        {this.renderBodyLeft()}
                    </div>
                    <div className="right" ref="bodyRight" onScroll={this.bodyRightScroll}>
                        {this.renderBodyRight()}
                    </div>
                </div>
            </div>
        )
    }
}